<!DOCTYPE html>
<html>

<head>


    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>域名库存</title>
    <#include "/header.html">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <script src="${request.contextPath}/statics/plugins/layui/layui.all.js"></script>
    <link rel="stylesheet" href="${request.contextPath}/statics/css/chartStyle.css">
    <script src="${request.contextPath}/statics/js/echarts.min.js"></script>
    <script src="${request.contextPath}/statics/js/transData.js"></script>
</head>
<style>
    .bootstrap-select{
        width: 100% !important;
    }
    .glyphicon-arrow-up{
        color: red;
    }

    .glyphicon-arrow-down{
        color: #76d471;
    }

    table tr td,th{
        text-align: center;
        min-width: 100px;
    }
</style>
<body>
<div id="index">
    <div class="layui-container" style="width: 100%;">
        <div class="layui-row" style="margin-top: 10px;">
            <div class="layui-col-md2 ">
                <select class="selectpicker" id="siteSelect" data-actions-box="true" data-select-all-text="全选" data-deselect-all-text="取消全选" data-deselect-all-text="全选" title="请选择平台名称" multiple  style="width:100%;" >
                </select>
            </div>
            <div class="layui-col-md2" style="padding-left: 20px;">
                <select class="selectpicker" id="siteSelect2" data-actions-box="true" data-select-all-text="全选" data-deselect-all-text="取消全选" data-deselect-all-text="全选" title="请选择域名库存统计字段" multiple  style="width:100%;" >
                </select>
            </div>

            <div class="layui-col-md3 " style="padding-left: 20px;">
                <div class="btn btn-default" id="search" onclick="reload()">对比</div>
        </div>

    </div>
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">图形展示</li>
                <li>表格数据</li>
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                <div class="layui-tab-item layui-show">
                    <div  class="panel">
                        <div  id="bargraph">

                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="table_con">
                        <table class="table table-bordered table-hover">
                            <thead id="dataHead">

                            </thead>
                            <tbody id="dataBody">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    <!--初始化-->
     function split_array(arr, len){
        var a_len = arr.length;
        var result = [];
        for(var i=0;i<a_len;i+=len){
            result.push(arr.slice(i,i+len));
        }
       // console.log(result);
        return result;
    }
   function reload(){
       $("#search").attr("disabled",'disabled');
       var _html ='';
       $("#dataHead").html('');
       $("#dataBody").html('');
       var  indexLoading = layer.load(2);
       if($('#siteSelect2').val()){
           var newArr = split_array($('#siteSelect2').val(),2);
           for(var i=0;i<newArr.length;i++){
               var col = '';
               for(var j =0;j<newArr[i].length;j++){
                   col = col+'<div class="col-md-6">' +
                       '<div id="bargraphs'+i+j+'" style="width: 100%;height: 400px;"></div>' +
                       '</div>' ;
               }
               _html = _html + '<div class="row" style="margin-top: 10px;">'+ col + '</div>';
           }
           $('#bargraph').html(_html);
       }else{
          _html ='';
           $('#bargraph').html(_html);
           layer.close(indexLoading);
           layer.msg('暂无数据');
           $("#search").attr("disabled",false);
           return;
       }
    $.ajax({
           type : "post",
           url : baseURL+"domainsta/findDomainCateAlarmSta",
           data:JSON.stringify({
               platformId:$('#siteSelect').val(),
               params:$('#siteSelect2').val()
           }),
           contentType:"application/json",
           success: function(data) {
               $("#search").attr("disabled",false);
               if(data.code==0){
                   showTable(data.result);
                  var newArr = split_array(data.result,2);
                  for(var i=0;i<newArr.length;i++){
                        for(var j=0;j<newArr[i].length;j++){
                            setbar(newArr[i][j].title,newArr[i][j].data,i+''+j)
                        }
                     }
                   layer.close(indexLoading);
              }else{
                   layer.msg('数据获取失败');
               }
           },
           error:function(){
               $("#search").attr("disabled",false);
               layer.msg('数据获取失败');
           }
       });
   }

    function showTable(data) {
        var itemText = [];
        var allData = [];
        var thHtml = '<tr><th>平台</th>';
        var trHtml = '';
        for(var i=0;i<data.length;i++){
            thHtml = thHtml + '<th>'+data[i].title+'</th>';
            for(var j=0;j<data[i].data.length;j++){
                allData.push(data[i].data[j]);
                 if(itemText.indexOf(data[i].data[j].name)==-1){
                    itemText.push(data[i].data[j].name);
                }
            }
        }

        for(var k=0;k<itemText.length;k++){
            trHtml = trHtml + '<tr><td>'+itemText[k]+'</td>';
             for(var m=0;m<allData.length;m++){
                 if(itemText[k]==allData[m].name){
                     if(allData[m].alarm){
                         trHtml = trHtml + '<th>'+allData[m].value+'</th>';
                     }else{
                         trHtml = trHtml + '<td>'+allData[m].value+'</td>';
                     }

                 };
              }
            trHtml = trHtml +'</tr>';
        }
        thHtml = thHtml + '</tr>';
        $("#dataHead").html(thHtml);
        $("#dataBody").html(trHtml);
    }
    function setbar(name,data,id){
        var array_name =[];
        var array_data = [];
        for(var i=0;i<data.length;i++){
            array_name.push(data[i].name);
            array_data.push(data[i].value);
        }

        var myChart = echarts.init(document.getElementById('bargraphs'+id));
        option = {
            title: {
                text: name
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },

            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: array_name
              },
            yAxis: {
                type: 'value'
            },
            dataZoom:[{
                start: 0
            }, {
               type: 'inside'
           }],
            color:['#2d8cf0','#19be6b', '#ff9900', '#e46cbb', '#9a66e4','#ed3f14','#CC9900','#9999FF','#996600','#009900','#336666','#666600','#9999CC','#CCCC33'],
            series: [
                {
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: 'black',
                                    fontSize: 16
                                }
                            }
                         }
                        },
                       data: array_data
                }
            ]
        };
        myChart.setOption(option,true);


    }

    $(function(){
        layui.use(['element','form'], function(){
            var element = layui.element;
            element.on('tab(docDemoTabBrief)', function(data){
                reload();
            });
        });
     $.ajax({
            type : "get",
            url : baseURL+"platform/findAllPlatform",
            dataType : "json",
            success: function(data) {
                if(data.code==0){
                    var _html = ''
                    var _arr =[]
                    for(var i=0;i<data.platformList.length;i++){
                        _html = _html + '<option value="'+data.platformList[i].platformId+'">'+data.platformList[i].nickName+'</option>'
                        _arr.push(data.platformList[i].platformId)
                    }
                    $('#siteSelect').html(_html);
                    $('#siteSelect').val(_arr)
                    $('#siteSelect').selectpicker('refresh');

                    $.ajax({
                        type : "get",
                        url : baseURL+"domaincate/findDomainCateAlarmList",
                        dataType : "json",
                        success: function(data) {
                            if(data.code==0){
                                var _html = '';
                                var activeSelect =[];
                                for(var i=0;i<data.result.length;i++){
                                    _html = _html + '<option value="'+data.result[i].domainCateKey+'">'+data.result[i].domainCateName+'</option>'
                                    activeSelect.push(data.result[i].domainCateKey)
                                }
                                $('#siteSelect2').html(_html);
                                $('#siteSelect2').val(activeSelect)
                                $('#siteSelect2').selectpicker('refresh');
                                reload()


                            }else{
                                layer.msg('数据获取失败');
                            }
                        },
                        error:function(){
                            statsData = false;
                            layer.msg('数据获取失败');
                        }
                    });

                }else{
                    layer.msg('数据获取失败');
                }
            },
            error:function(){
                statsData = false;
                layer.msg('数据获取失败');
            }
        });


    })








</script>
<style>
    .chartText b.green{
        background-color:#2ec770;
    }
    .chartText span.green{
        color:#2ec770;
    }
    .chartText b.blue{
        background-color:#1c97f5;
    }
    .chartText span.blue{
        color:#1c97f5;
    }
    .chartText b.red{
        background-color: red;
    }
    .chartText span.red{
        color: red;
    }
    .chartText b.wathet{
        background-color: #62a6f5;
    }
    .chartText span.wathet{
        color: #62a6f5;
    }
</style>
</body>

</html>